{% extends "base-user.html" %}

{% block css%}    
<!-- DATA TABLES -->
<link href="/static/css/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
{% endblock %}
{% block js%}
<!-- DATA TABES SCRIPT -->
<script src="/static/js/plugins/datatables/jquery.dataTables.js" type="text/javascript"></script>
<script src="/static/js/plugins/datatables/dataTables.bootstrap.js" type="text/javascript"></script>  
<script>
$(function() {
    $('#example1').dataTable();
});
</script>
{% endblock %}


{% block on_ready%}    
{% endblock %}

{% block content %} 
<div class="row">      
    <div class="col-md-12">

        <div class="box">
            <div class="box-header">
                <h3 class="box-title">{{get_sensor.name}} Data Table</h3>
            </div>
            <div class="box-body table-responsive">
                <table id="example1" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Datetime</th>
                            {% if get_sensor.sensor_class == 'n' %}
                            <th>Value</th>
                            {% else %}
                            <th>Url</th>
                            {% endif %}         
                        </tr>
                    </thead>
                    <tbody>
                    {%for item in datapoint%}
                    
                        <tr>
                            <td>{{item.key}}</td>
                            {% if get_sensor.sensor_class == 'n' %}
                            <td>{{item.value}} {{get_sensor.unit}}</td>
                            {% else %}
                            <td><a href="http://{{domain}}{{item.pic_file}}">{{domain}}{{item.pic_file}}</a></td>
                            {% endif %}         
                        </tr>
                    
                    {%endfor%}
                    </tbody>

                </table>
            </div>
        </div>

    </div>
</div>	
{% endblock %}